import * as React from 'react'
import {
	DragSource,
	ConnectDragSource,
	ConnectDragPreview,
	DragSourceConnector,
	DragSourceMonitor,
	DragSourceCollector,
} from 'react-dnd'
import ItemTypes from './ItemTypes'

const knightSource = {
	beginDrag() {
		return {}
	},
}

const collect: DragSourceCollector<KnightProps> = (
	connect: DragSourceConnector,
	monitor: DragSourceMonitor,
) => ({
	connectDragSource: connect.dragSource(),
	connectDragPreview: connect.dragPreview(),
	isDragging: monitor.isDragging(),
})

export interface KnightProps {
	connectDragSource?: ConnectDragSource
	connectDragPreview?: ConnectDragPreview
	isDragging?: boolean
}

@DragSource(ItemTypes.KNIGHT, knightSource, collect)
export default class Knight extends React.Component<KnightProps> {
	public componentDidMount() {
		const img = new Image()
		img.src =
			''
		img.onload = () =>
			this.props.connectDragPreview && this.props.connectDragPreview(img)
	}

	public render() {
		const { connectDragSource, isDragging } = this.props
		return (
			connectDragSource &&
			connectDragSource(
				<div
					style={{
						fontSize: 40,
						fontWeight: 'bold',
						cursor: 'move',
						opacity: isDragging ? 0.5 : 1,
					}}
				>
					♘
				</div>,
			)
		)
	}
}
